<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Pensela</title>
		<link rel="stylesheet" href="style.css" />
	</head>

	<body>
		<div class="panel">
			<div class="logo"></div>
			<div class="tool-container text tool-item" title="Add Text">T</div>
			<div class="tool-container color">
				<div class="tool-item color main" colorData="b4deff"></div>
				<div
					class="tool-item color secondary one"
					colorData="ffb4bd"
				></div>
				<div
					class="tool-item color secondary two"
					colorData="b3fdd7"
				></div>
				<div
					class="tool-item color secondary three"
					colorData="fff2b9"
				></div>
				<div
					class="tool-item color secondary four"
					colorData="000"
				></div>
				<div
					class="tool-item color secondary transparent"
					colorData="00000000"
				></div>
				<div
					class="tool-item color secondary custom"
					title="Choose A Custom Color"
				></div>
			</div>
			<div class="tool-container shapes">
				<div class="tool-item shapes polygon" title="Polygon"></div>
				<div class="tool-item shapes main line" title="Line"></div>
				<div class="tool-item shapes square" title="Square"></div>
				<div class="tool-item shapes triangle" title="Triangle"></div>
				<div class="tool-item shapes circle" title="Ellipse"></div>
			</div>
			<div class="tool-container sticker">
				<div class="tool-item sticker tick" title="Tick"></div>
				<div class="tool-item sticker cross" title="Cross"></div>
				<div class="tool-item sticker star" title="Star"></div>
				<div
					class="tool-item sticker pen main"
					title="Draw Freehand"
				></div>
				<div class="tool-item sticker eraser" title="Eraser"></div>
				<div
					class="tool-item sticker arrow single"
					title="Single Sided Arrow"
				></div>
				<div
					class="tool-item sticker arrow double"
					title="Double Sided Arrow"
				></div>
				<div
					class="tool-item sticker highlighter"
					title="Highlighter"
				></div>
				<div
					class="tool-item sticker clear"
					title="Clear All Drawings"
				></div>
			</div>
			<div
				class="tool-container bg tool-item"
				title="Choose Background Color"
			></div>
			<div class="tool-container win-controls">
				<div class="tool-item win-controls mouse main selected"></div>
				<div class="tool-item win-controls drag" title="drag"></div>
				<div
					class="tool-item win-controls screenshot"
					title="screenshot"
				></div>
				<div
					class="tool-item win-controls laser"
					title="laser pen"
				></div>
				<div
					class="tool-item win-controls visibility visible"
					title="Toggle Visibility"
				></div>
			</div>
			<div class="tool-container alt-controls">
				<div class="tool-item alt-controls redo" title="redo"></div>
				<div
					class="tool-item alt-controls stroke increase"
					title="increase stroke"
				>
					▲
				</div>
				<div class="tool-item alt-controls exit">✖</div>
				<div class="tool-item alt-controls undo" title="undo"></div>
				<div
					class="tool-item alt-controls stroke decrease"
					title="decrease stroke"
				>
					▼
				</div>
				<div class="tool-item alt-controls minimize">_</div>
			</div>
		</div>
	</body>
	<script src="./scripts/controller.js"></script>
</html>
